<template>
	<view class="page-container">
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 类型选择 -->
			<view class="form-item">
				<text class="label">类型</text>
				<uni-data-select 
					v-model="formData.type"
					:localdata="typeOptions"
					placeholder="请选择类型"
					class="select-input"
				></uni-data-select>
			</view>

			<!-- 内容输入 -->
			<view class="form-item">
				<text class="label">内容</text>
				<uni-easyinput 
					v-model="formData.content"
					type="textarea"
					placeholder="请输入您的投诉或建议内容"
					rows="5"
					class="content-input"
				></uni-easyinput>
			</view>

			<!-- 提交按钮 -->
			<button type="primary" @click="submitForm" class="submit-btn">提交</button>
		</view>
	</view>
</template>

<script>
	import { request } from '@/util/request.js'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					type: '',
					content: ''
				},
				// 类型选项
				typeOptions: [
					{ text: '投诉', value: '投诉' },
					{ text: '建议', value: '建议' }
				]
			};
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},
			// 提交表单
			async submitForm() {
				// 简单验证
				if (!this.formData.type) {
					uni.showToast({ title: '请选择类型', icon: 'none' });
					return;
				}
				if (!this.formData.content.trim()) {
					uni.showToast({ title: '请输入内容', icon: 'none' });
					return;
				}

				// 这里可以添加提交到后端的逻辑
				const resp = await request({
					url: 'owner-server/owner/addComplaint',
					method: 'POST',
					data: {
						type: this.formData.type,
						content: this.formData.content
					}
				});
				if (resp.code === 200) {
					uni.showToast({ title: '提交成功', icon: 'success' });
					this.navigateBack();
				} else {
					uni.showToast({ title: '提交失败，' + resp.msg, icon: 'none' });
				}
			}
		}
	};
</script>

<style lang="scss">
	.page-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-container {
		padding: 15px;
		background-color: #fff;
		margin-top: 10px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
	}

	.select-input,
	.content-input {
		width: 100%;
	}

	.submit-btn {
		width: 100%;
		margin-top: 20px;
		padding: 10px 0;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 16px;
	}
</style>
